import React from 'react';
// 引入less
import './myorder.less';
// 引入图标
// import { ShopbagOutline, GiftOutline, TruckOutline } from 'antd-mobile-icons';
// 引入组件
import { Swiper } from 'antd-mobile';

const colors = ['#ace0ff', '#bcffbd'];
const verticalItems = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div className="swiper-box">
      <div className="swiper-box-left">aaaa</div>
    </div>
  </Swiper.Item>
));

interface Iprops {
  token: string;
}

export default function Myorder(props: Iprops) {
  return (
    <div className="myorder">
      <h3>我的订单</h3>
      <div className="order">
        <div className="order-box">
          <svg
            className="order-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11404"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M845.799412 396.132062 536.605398 396.132062c-44.756343 0-82.001619 33.408901-87.195921 77.973886-0.678452 1.682315-1.003863 3.601015-1.003863 5.814426l0 67.171865c0 48.637744 39.562041 88.184435 88.199785 88.184435l309.192991 0c48.637744 0 88.184435-39.547715 88.184435-88.184435l0-62.773695C933.983847 435.678754 894.436132 396.132062 845.799412 396.132062zM876.433106 488.566288l0 54.274114c0 19.24225-15.642259 34.884508-34.884508 34.884508L540.840862 577.724911c-19.24225 0-34.884508-15.642259-34.884508-34.884508l0-54.274114c0-19.24225 15.642259-34.884508 34.884508-34.884508l300.707736 0C860.791871 453.68178 876.433106 469.324038 876.433106 488.566288z"
              fill="#5e5e5e"
              p-id="11405"
            ></path>
            <path
              d="M830.42219 649.176243c-15.789615 0-28.686343 12.8384-28.77537 28.863375l0 107.545388c0 19.24225-15.671934 34.884508-34.914184 34.884508L174.790932 820.469514c-19.24225 0-34.898835-15.642259-34.898835-34.884508L139.892097 238.443647c0-19.24225 15.656585-34.914184 34.898835-34.914184l591.942727 0c19.24225 0 34.914184 15.670911 34.914184 34.914184l0 113.950262c0 15.877619 12.896728 28.77537 28.77537 28.77537 15.877619 0 28.77537-12.896728 28.77537-28.863375L859.198583 234.193857c0-48.637744-39.577391-88.214111-88.214111-88.214111L170.541141 145.979746c-48.637744 0-88.199785 39.577391-88.199785 88.214111l0 555.641963c0 48.637744 39.562041 88.184435 88.199785 88.184435L770.983449 878.020254c48.637744 0 88.214111-39.547715 88.214111-88.184435l0-112.031563C859.109556 662.014642 846.211804 649.176243 830.42219 649.176243z"
              fill="#5e5e5e"
              p-id="11406"
            ></path>
            <path
              d="M817.318754 481.778698c-18.446118 0-33.438577 15.022135-33.438577 33.468253 0 18.446118 14.992459 33.438577 33.438577 33.438577 18.446118 0 33.468253-14.992459 33.468253-33.438577C850.787006 496.800833 835.764871 481.778698 817.318754 481.778698z"
              fill="#5e5e5e"
              p-id="11407"
            ></path>
          </svg>
          <h4>待付款</h4>
        </div>
        <div className="order-box">
          <svg
            className="order-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="12573"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M838.174758 140.444683 180.850951 140.444683c-50.327222 0-91.27482 40.977273-91.27482 91.304496l0 562.711985c0 50.327222 40.947598 91.27482 91.27482 91.27482l657.323806 0c50.327222 0 91.27482-40.947598 91.27482-91.27482l0-225.270627 0-23.254633 0-314.185702C929.449577 181.422979 888.503003 140.444683 838.174758 140.444683zM833.695746 197.597357c21.315468 0 38.632879 17.317411 38.632879 38.632879l0 151.072741-221.182518-0.361227-0.029676-189.344393L833.695746 197.597357zM591.498612 197.597357l0.060375 387.647831-55.288211-33.341363-5.65172-2.856048-0.330528 0.63138c-8.267291-2.795673-17.407462-1.923816-24.802896 2.52552-1.202385 0.751107-2.013867 1.593288-1.864464 1.804089l-53.18327 29.582759-0.060375-385.994168L591.498612 197.597357zM146.698107 236.229213c0-21.315468 17.317411-38.632879 38.632879-38.632879l205.428719 0 0.029676 189.735295-244.091274-0.390903L146.698107 236.229213zM872.327602 789.982152c0 21.315468-17.317411 38.632879-38.632879 38.632879L185.330986 828.615031c-21.315468 0-38.632879-17.317411-38.632879-38.632879L146.698107 446.528869l244.12095 0.361227 0.029676 187.209776c0 19.301602 19.180851 35.024701 38.422078 28.319999l0.51063 0.842181 91.454922-50.808176 84.811618 51.560306c13.709233 8.116865 32.800034 3.1569 40.857547-10.432607 2.885723-4.869914 4.118807-10.642384 3.698229-16.174378 0.029676-0.090051 0.060375-0.180102 0.090051-0.270153l0.480954-0.51063-0.029676-190.095499 221.182518 0.361227 0 99.287307 0 23.074531L872.327602 789.982152z"
              fill="#5e5e5e"
              p-id="12574"
            ></path>
          </svg>
          <h4>代发货</h4>
        </div>
        <div className="order-box">
          <svg
            className="order-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6982"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M841.530179 137.779993 366.132818 137.779993c-49.562812 0-89.855494 40.144302-89.855494 89.499383l0 131.069151-172.015725 99.067296-6.299473 4.189416 0.713244 1.218758 0.029676 0.118704c-3.922333 4.694929-6.062066 10.54824-6.062066 16.58063l0 275.063683c0 16.075117 12.063757 29.1499 26.891464 29.1499 14.857383 0 26.921139-13.103436 26.921139-29.238928L146.455583 494.973208l168.746262-97.373725c11.707646-4.130064 19.552312-15.124466 19.552312-27.336602L334.754157 231.587496c0-19.552312 16.015765-35.479049 35.68678-35.479049l466.750423 0c19.671015 0 35.68678 15.926738 35.68678 35.479049l0 512.034792c0 16.104793 13.104459 29.179576 29.238928 29.179576 16.134469 0 29.238928-13.104459 29.238928-29.238928L931.355997 227.278353C931.355997 177.923272 891.063315 137.779993 841.530179 137.779993z"
              p-id="6983"
              fill="#5e5e5e"
            ></path>
            <path
              d="M741.957369 656.351666c-55.595202 0-102.900601 39.49041-112.973004 94.104261l-204.284663-0.118704c-10.132778-54.555523-57.437154-93.985558-112.973004-93.985558-63.647599 0-115.439172 51.554166-115.439172 114.934682s51.791573 114.934682 115.439172 114.934682c51.67287 0 97.194646-34.558074 111.071701-84.209914l208.117968 0.089028c13.906731 49.592488 59.398832 84.120886 111.042026 84.120886 63.647599 0 115.409496-51.554166 115.409496-114.934682S805.604968 656.351666 741.957369 656.351666zM741.957369 825.514413c-30.070876 0-54.525847-24.336268-54.525847-54.228065 0-29.892821 24.454972-54.228065 54.525847-54.228065s54.525847 24.336268 54.525847 54.228065C796.483216 801.178145 772.028245 825.514413 741.957369 825.514413zM311.726697 825.514413c-30.070876 0-54.525847-24.336268-54.525847-54.228065 0-29.892821 24.454972-54.228065 54.525847-54.228065 30.0412 0 54.496172 24.336268 54.496172 54.228065C366.221846 801.178145 341.766874 825.514413 311.726697 825.514413z"
              p-id="6984"
              fill="#5e5e5e"
            ></path>
            <path
              d="M224.930889 573.151755c0 15.540951 12.687974 28.199249 28.317952 28.199249l109.526509-0.029676c15.421224 0 27.575032-4.605901 36.162618-13.727653 13.638625-14.470573 12.539594-35.003212 12.509918-35.121915l0-85.814458c0-15.540951-12.687974-28.199249-28.317952-28.199249s-28.317952 12.658298-28.317952 28.199249l0.029676 78.2072-101.652168 0C237.589187 544.952506 224.930889 557.64048 224.930889 573.151755z"
              p-id="6985"
              fill="#5e5e5e"
            ></path>
          </svg>
          <h4>待收货</h4>
        </div>
        <div className="order-box">
          <svg
            className="order-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10263"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M508.73909433 722.38119277c-232.67493633 0-383.02832724-125.81369122-383.02832724-320.56363828 0-9.04411494-0.12058857-19.163475-0.24117627-29.89582558-0.60294112-52.09410322-1.3666667-116.93036074 9.59681074-156.37275089 6.25048857-22.49974863 22.35906211-39.68356729 45.37131152-48.34582031 35.76445136-13.45563369 84.8840458-6.24043916 149.62986124 22.10783731C357.36070362 143.83919375 419.08176582 62.05024531 509.65355498 62.05024531c101.44482539 0 153.52888008 85.26590771 174.91318682 133.65192393 56.81714151-19.78651406 131.81295411-38.00538193 169.18524843-13.96813359 45.22057559 29.0919041 63.8414042 104.02742286 55.26959239 222.70631221-14.68161387 204.99994424-156.8551043 317.94084492-400.28248828 317.94084492zM219.53843721 218.99579083c-7.27548838 0-11.24484961 1.12548955-12.83259463 1.72843065-1.94950898 0.73357823-5.18529287 1.94950898-7.03431123 8.60195831-8.99387051 32.37793242-8.26029229 95.75708203-7.72769443 142.03280478 0.13063711 10.93333008 0.25122568 21.23357256 0.25122568 30.47866787 0 126.80854365 83.16566367 262.27934033 316.54403174 262.27934034 209.01955078 0 321.4178042-88.64237812 333.96902665-263.46512461 7.79803682-108.52938193-10.38063428-160.57324073-28.30808056-172.10951192-14.5208294-5.21543935-79.83943945 10.16960537-136.2445708 32.74974668l-36.46788223 14.59117178-9.61690957-34.05611778c-0.33161748-1.16568633-35.86494112-121.5931043-122.41712285-121.5931043-64.51468857 0-118.34727187 86.64262383-133.6519248 120.03550665l-14.21935928 31.0514625-33.16175508-16.60097637c-59.86199355-30.04656065-92.78257237-35.72425459-109.08207861-35.72425458z"
              p-id="10264"
              fill="#5e5e5e"
            ></path>
            <path
              d="M508.73909433 962c-18.35955352 0-33.24214776-13.06372237-33.24214775-29.14214854V693.25914219c0-16.07842705 14.88259424-29.14214854 33.24214775-29.14214942s33.24214776 13.06372237 33.24214776 29.14214942v239.61880722c0 16.08847558-14.88259424 29.12205059-33.24214776 29.12205059zM642.68243984 948.78554258c-1.20588223 0-2.42181299-0.06029385-3.65784169-0.17083301-18.23896582-1.75857803-31.42327588-16.07842705-29.433571-32.1568541 0.72352881-5.75808662 19.21372031-141.50020693 157.06613408-171.48647285 138.29457041-30.04656065 188.42911523 34.67915684 190.48916338 37.44263672 10.0490168 13.46568223 5.72793925 31.51371709-9.63700664 40.30660722s-35.95538232 5.02450839-46.00439912-8.44117471c-0.5928917-0.58284317-29.14214854-32.25734385-118.82962529-12.7722999-93.32521963 20.31911192-106.86124511 120.31687881-106.98183281 121.32178067-1.85906778 14.91274072-16.269358 25.95661084-33.01102091 25.95660996zM381.98079511 948.78554258c-16.71151465 0-31.09165839-11.00367334-33.00097148-25.86616963-0.56274521-4.26078281-14.54092734-101.27399239-106.98183369-121.3720251-89.72767178-19.54533779-118.24678125 12.16935967-119.43256553 13.53602549-10.0490168 13.46568223-30.35808018 16.83210322-45.71297754 8.03921309s-19.38455332-27.20268896-9.33553652-40.6683712c2.08014609-2.76347988 52.2548877-67.46909941 190.48916338-37.44263671 137.88256026 29.98626592 156.3426044 165.72838623 157.06613408 171.48647284 2.00980371 15.99803526-11.19460518 30.36812872-29.43357011 32.15685411-1.23602871 0.07034326-2.45196035 0.13063711-3.65784258 0.13063711z"
              p-id="10265"
              fill="#5e5e5e"
            ></path>
          </svg>
          <h4>待评价</h4>
        </div>
        <div className="order-box">
          <svg
            className="order-icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8172"
            width=".7rem"
            height=".7rem"
          >
            <path
              d="M600.139409 523.040451l7.701402-0.150426 0-1.203408c10.16757-3.278673 17.568121-12.844539 17.568121-24.125467 0-13.957897-11.341303-25.299199-25.2685-25.299199l-98.127901 0 0-21.478174 102.609982-100.624768 4.872984-5.02341-0.451278-0.572028c2.105964-3.459798 3.368724-7.40055 3.6399-11.58178 0.421602-6.768147-1.834788-13.295817-6.347568-18.410302-8.844435-9.987468-25.238824-11.400654-36.008099-1.865487l-93.253894 91.960435-98.698906-96.864118c-10.017144-8.904811-26.862811-7.941879-35.707246 2.105964-7.610328 8.543583-8.332782 20.87647-2.557242 30.172183l-0.541329 0.691755L451.233008 449.971271l0 22.290679-98.127901 0-7.701402 0.090051 0 1.203408c-10.16757 3.278673-17.568121 12.844539-17.568121 24.095791s7.40055 20.817118 17.568121 24.095791l0 1.293459 105.82828 0 0 38.98592-105.82828 0.060375 0 1.203408c-10.19827 3.248997-17.597797 12.814864-17.597797 24.095791s7.40055 20.846794 17.597797 24.125467l0 1.293459 105.82828 0 0 96.803743 0.090051 7.701402 1.203408 0c3.278673 10.16757 12.844539 17.568121 24.095791 17.568121s20.817118-7.40055 24.095791-17.568121l1.293459 0L502.010485 612.805894l98.127901 0 7.701402-0.150426 0-1.203408c10.16757-3.278673 17.568121-12.844539 17.568121-24.125467 0-13.957897-11.341303-25.299199-25.2685-25.299199l-98.127901 0 0-38.98592L600.139409 523.041474z"
              fill="#5e5e5e"
              p-id="8173"
            ></path>
            <path
              d="M955.443601 474.882638c-10.555403-10.730389-27.740808-10.818393-38.412868-0.323365l-25.203008 24.800849C885.08516 275.592732 702.013635 96.145757 476.613048 96.145757c-229.670843 0-415.854243 186.185446-415.854243 415.854243 0 229.670843 186.1834 415.854243 415.854243 415.854243 127.552048 0 241.064334-57.961086 317.331345-148.385539 3.13234-2.357697 5.696746-5.206582 7.632841-8.638751 0.379647-0.477884 0.832971-0.8913 1.210571-1.370207l-0.208754-0.116657c1.796926-3.727904 2.998287-7.776104 2.998287-12.192693 0-15.684214-12.715603-28.40084-28.40084-28.40084-10.070356 0-18.495236 5.542226-23.539112 13.44522-66.165955 79.488379-165.761278 130.213667-277.025361 130.213667-198.729134 0-360.40742-161.678286-360.40742-360.40742 0-198.72811 161.678286-360.405373 360.40742-360.405373s360.40742 161.678286 360.40742 360.405373c0 1.297552-0.12996 2.562359-0.148379 3.853771l-41.003879-41.11849c-10.583033-10.583033-27.799136-10.641361-38.442544-0.058328-10.611685 10.611685-10.641361 27.799136-0.058328 38.441521l75.026764 75.233472c5.305843 5.305843 12.294001 7.988951 19.250436 7.988951 0.167822 0 0.323365-0.092098 0.491187-0.096191 2.099824 0.509606 4.169973 1.246387 6.318916 1.246387 6.868431 0 13.766538-2.62478 19.043728-7.81192l77.620845-76.383668C965.819926 502.771825 965.966259 485.555721 955.443601 474.882638z"
              fill="#5e5e5e"
              p-id="8174"
            ></path>
          </svg>
          <h4>退货/售后</h4>
        </div>
      </div>
      {/* 轮播部分 */}
      {props.token ? (
        <div className="swiper">
          <Swiper
            autoplay
            loop
            autoplayInterval={5000}
            indicator={() => null}
            direction="vertical"
            style={{ '--height': '2rem' }}
          >
            {verticalItems}
          </Swiper>
        </div>
      ) : (
        <div>
          <span>&nbsp;</span>
        </div>
      )}
    </div>
  );
}
